


Using work skins to show text messaging

by willdieofconsumption



Category: None - Fandom
Genre: CSS, Fanwork Research & Reference Guides, HTML
Language: English
Status: Completed
Published: 2021-01-25
Updated: 2021-01-27
Packaged: 2021-03-18 04:00:50
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 3
Words: 2,231
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/28986018
Author URL: https://archiveofourown.org/users/willdieofconsumption/pseuds/willdieofconsumption
Summary: This was based off of La_Temperanza's "How to Make iOS Text Messages on AO3" and the Android coding from gadaursan' Repository, which you can find at the bottom two link respectively. If any of my modifications are useful to you you are more than welcome to use them, but I have no idea what I am doing. I very literally did this entire thing via trial and error please do not ask me any questions I am but a fool. This is, more than anything, a reference for me to check and make sure everything is in working order for my own fic, but if there's anything you want to use, have at it.There are some problems with the spacing and sizing of things and I am not happy with how it looks on mobile or how the images interfere with readability when work style is off, but what can you do?https://archiveofourown.org/works/6434845/chapters/14729722https://archiveofourown.org/works/8631214?style=creator&view_full_work=true
Kudos: 1





	1. Samples

**Author's Note:**

> This was based off of La_Temperanza's "How to Make iOS Text Messages on AO3" and the Android coding from gadaursan' Repository, which you can find at the bottom two link respectively. If any of my modifications are useful to you you are more than welcome to use them, but I have no idea what I am doing. I very literally did this entire thing via trial and error please do not ask me any questions I am but a fool. This is, more than anything, a reference for me to check and make sure everything is in working order for my own fic, but if there's anything you want to use, have at it.  
> There are some problems with the spacing and sizing of things and I am not happy with how it looks on mobile or how the images interfere with readability when work style is off, but what can you do?  
> https://archiveofourown.org/works/6434845/chapters/14729722  
> https://archiveofourown.org/works/8631214?style=creator&view_full_work=true

Old iphone set-up

Messages with  CONTACT NAME   
  
**DAY** TIME PM    
**RECEIVER NAME:** OUTGOING SMS   
**RECEIVER NAME:** OUTGOING IMESSAGE   
  
**SENDER NAME:** INCOMING IMESSAGE   
  
**RECEIVER NAME:** BUNCHED   
OUTGOING IMESSAGE   
  
**SENDER NAME:** BUNCHED   
INCOMING IMESSAGE   
  
**RECEIVER NAME:** BUNCHED   
OUTGOING SMS   
  


New imessage set-up

  
  
Messages with  Contact Name>   
**DAY** TIME PM   
**RECEIVER NAME:** OUTGOING SMS   
**RECEIVER NAME:** OUTGOING IMESSAGE   
  
**SENDER NAME:** INCOMING IMESSAGE   
  
**RECEIVER NAME:** BUNCHED   
OUTGOING IMESSAGE   
  
**SENDER NAME:** BUNCHED   
INCOMING IMESSAGE   
  
**RECEIVER NAME:** BUNCHED   
OUTGOING SMS   
  


Old iphone groupchat mock

  
  
Messages in  CHAT NAME    
**DAY** TIME PM   
**RECEIVER NAME:** OUTGOING IMESSAGE   
  
SENDER NAME   
**:** INCOMING IMESSAGE   
**RECEIVER NAME:** BUNCHED   
OUTGOING IMESSAGE   
  
SENDER NAME   
**:** BUNCHED   
INCOMING IMESSAGE   
  


New iphone groupchat mock

  
  
Messages in   
CHAT NAME>   
  


**DAY** TIME PM   
SENDER NAME 

:

  

  1. INCOMING MESSAGE 

**RECEIVER NAME:** OUTGOING IMESSAGE    
  
SENDER NAME 

:

  


BUNCHED 

  
  

  2. INCOMING MESSAGE 

**DAY** TIME PM   
**RECEIVER NAME:** BUNCHED   
OUTGOING IMESSAGE   



Android mock 

CONTACT NAME 

  1. RECEIVER NAME: 

OUTGOING SMS 

x min 

  2. SENDER NAME: 

INCOMING SMS 

1 min 

  3. RECEIVER NAME: 

OUTGOING SMS 

1 min 

  4. BUNCHED 

1 min 




Fake old messaging program 

  


Messages with  CONTACT NAME [CONTACT NUMBER] 

(X:XXPM)ME:   
OUTGOING SMS 

(X:XXPM)CONTACT NAME:   
INCOMING SMS 

(X:XXPM)ME:   
OUTGOING SMS 

(X:XXPM)CONTACT NAME:   
INCOMING SMS 

  



blog thing

  


| 
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
  
---|---  



  
  
Messages in   
CHAT NAME>   
  


**DAY** TIME PM   
|  SENDER NAME 

:

  
INCOMING ME   
---|---  
**RECEIVER NAME:** OUTGOING IMESSAGE    
  
SENDER NAME 

:

  


BUNCHED 

  
  

  1. INCOMING MESSAGE 

**DAY** TIME PM   
**RECEIVER NAME:** BUNCHED   
OUTGOING IMESSAGE   




	2. HTML

#  Old iphone set-up

<p></p>

<div class="iphone">

<p class="imessagebody">

<span class="iheader"><span class="hide"> Messages with </span> Contact Name </span><span class="hide"></span><br />

<br />

<span class="itime"><b> DAY </b> TIME PM </span><br />

<span class="greply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING SMS </span><br />

<span class="breply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING IMESSAGE </span><br />

<br />

<span class="itext"><span class="hide"><b> SENDER NAME: </b></span> INCOMING IMESSAGE </span><br />

<br />

<span class="bunchedbreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br />

<span class="breply"> OUTGOING IMESSAGE </span><br />

<br />

<span class="buncheditext"><span class="hide"><b> SENDER NAME: </b></span> BUNCHED </span><br /><span class="itext"> INCOMING IMESSAGE </span><br />

<br />

<span class="bunchedgreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br />

<span class="greply"> OUTGOING SMS</span><br />

<br />

#    
  


</p></div>

#    
  


#  New imessage set-up

#    
  


<div class="iphone">

<p class="imessagebody">

<span class="iheadernew"><br />

<img src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1" width="40" height="40" align="center" /><br />

<span class="hide"> Messages with </span> Contact Name> </span><span class="hide"></span>

<br />

<span class="itime"><span class="hide"><b>DAY</b> TIME PM</span><b>DAY</b> TIME PM</span><br />

<span class="greply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING SMS</span><br />

<span class="breply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING IMESSAGE </span><br />

<br />

<span class="itext"><span class="hide"><b> SENDER NAME: </b></span> INCOMING IMESSAGE </span><br />

<br />

<span class="bunchedbreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br />

<span class="breply"> OUTGOING IMESSAGE </span><br />

<br />

<span class="buncheditext"><span class="hide"><b> SENDER NAME: </b></span> BUNCHED </span><br /><span class="itext"> INCOMING IMESSAGE </span><br />

<br />

<span class="bunchedgreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br />

<span class="greply"> OUTGOING SMS</span><br />

<br />

</p></div>

#    
  


#  Old iphone groupchat mock

<div class="iphone">

<p class="imessagebody">

<span class="iheadernew"><br />

<img src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1" width="40" height="40" align="center"/><br />

<span class="hide"> Messages in </span> CHAT NAME </span><span class="hide"></span>

<br />

<span class="itime"><span class="hide"><b>DAY</b> TIME PM</span><b>DAY</b> TIME PM</span><br />

<span class="breply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING IMESSAGE </span><br />

<br />

<span class="inames">SENDER NAME</span><br /><span class="hide"><b>: </b></span>

<span class="itext"> INCOMING IMESSAGE </span><br />

<span class="bunchedbreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br /><span class="breply"> OUTGOING IMESSAGE </span><br />

<br />

<span class="inames">SENDER NAME</span><br /><span class="hide"><b>: </b></span>

<span class="buncheditext"> INCOMING IMESSAGE </span><br />

<span class="itext"> INCOMING IMESSAGE </span><br />

<br />

</p></div>

#  New iphone groupchat mock

<p></p>

<div class="iphoneCHAT">

<span class="headerCHAT"><br /><img src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1" width="40" height="40" align="center" /><br />

<span class="hide"> Messages in</span> CHAT NAME> </span><br />

<ol class="messagebodyCHAT">

<span class="itime"><span class="hide"><b>DAY</b> TIME PM</span><b>DAY</b> TIME PM</span><br />

<span class="inamesCHAT">SENDER NAME<p class="hide">:</p></span><br />

<li class="textWrapperCHAT"><span class="textIconWrapperCHAT"><img class="iconCHAT" src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1"/></span><span class="textCHAT"><p>INCOMING MESSAGE</p></span></li>

<span class="breply"><span class="hide"><b> RECEIVER NAME: </b></span> OUTGOING IMESSAGE </span><br /><br />

<span class="inamesCHAT">SENDER NAME<p class="hide">:</p></span><br />

<span class="bunchtextCHAT"><p>BUNCHED</p></span><br /><br />

<li class="textWrapperCHAT"><span class="textIconWrapperCHAT"><img class="iconCHAT" src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1"/></span><span class="textCHAT"><p>INCOMING MESSAGE</p></span></li>

<span class="itime"><span class="hide"><b>DAY</b> TIME PM</span><b>DAY</b> TIME PM</span><br />

<span class="bunchedbreply"><span class="hide"><b> RECEIVER NAME: </b></span> BUNCHED </span><br /><span class="breply"> OUTGOING IMESSAGE </span><br />

</ol></div>

</div>

#  Android mock

<p></p><div class="phoneAND">

<p class="headerAND">CONTACT NAME</p>

<ol class="messagebodyAND">

<li class="replyWrapperAND"><span class="iconWrapperAND"></span><span class="replyAND"><p class="hide">RECEIVER NAME:</p><p>OUTGOING SMS</p><p class="timestampAND">x min</p></span><span class="replyIconWrapperAND"><img class="iconAND" src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1"/></span></li>

<li class="textWrapperAND"><span class="textIconWrapperAND"><img class="iconAND" src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1"/></span><span class="textAND"><p class="hide">SENDER NAME:</p><p>INCOMING SMS</p><p class="timestampAND">1 min</p></span><span class="iconWrapperAND"></span></li>

<li class="replyWrapperAND"><span class="iconWrapperAND"></span><span class="replyAND"><p class="hide">RECEIVER NAME:</p><p>OUTGOING SMS</p><p class="timestampAND">1 min</p></span><span class="replyIconWrapperAND"><img class="iconAND" src="https://www.dropbox.com/s/4rq6xnof7zunpig/circle-cropped%20%281%29.png?raw=1"/></span></li>

<li class="replyWrapperAND"><span class="iconWrapperAND"></span><span class="replyAND"><p class="hide">RECEIVER NAME:</p><p>BUNCHED</p><p class="timestampAND">1 min</p></span><span class="iconWrapperAND"></span></li>

</ol></div>

</div>

#    
  


#  Fake old messaging program

<p></p><p><p/><br />

<div class="bbphone">

<ol class="bbmessagebody">

<span class="bbheader"><span class="hide"> Messages with </span> CONTACT NAME [CONTACT NUMBER] </span><span class="hide"></span>

#    
  


<p class="bbreply">(X:XXPM)ME:<br />OUTGOING SMS</p>

<p class="bbtext">(X:XXPM)CONTACT NAME:<br />INCOMING SMS</p>

<p class="bbreply">(X:XXPM)ME:<br />OUTGOING SMS</p>

<p class="bbtext">(X:XXPM)CONTACT NAME:<br />INCOMING SMS</p>

<br />

</ol></div>

#    
  


**Notes for the Chapter:**

> If you're trying to use this but the formatting is miserable and unreasonable you can make a copy of the template I made on google docs, which is essentially a fill-in-the-blanks version. Also a reminder that if you're using an image from dropbox, you have to edit the "dl=0" at the end of the link into "raw=1" I don't know why this is.
> 
> https://docs.google.com/document/d/1BSFxLzsE3jmBLyRPG0PgA5GQ3vfvs7rzANvmz-w22h0/edit?usp=sharing


	3. workskin

#workskin .hide {

display: none;

}

#workskin .iphone {

max-width: 300px;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

display: table;

margin: auto;

}

#workskin .iheader {

min-width: 300px;

background-color: #f6f6f6;

border-bottom: 1px solid #b2b2b2;

color: #000000;

font-weight: bold;

padding-bottom: .5em;

padding-top: .5em;

margin-left: -.5em;

margin-right: -.5em;

margin-bottom: -2em;

text-align: center;

text-transform: capitalize;

display: table;

}

#workskin .iheadernew {

display: table;

min-width: 300px;

background-color: #f6f6f6;

border-bottom: 1px solid #b2b2b2;

color: #000000;

font-weight: lighter;

font-size: .25em;

padding-bottom: .5em;

padding-top: .5em;

margin-left: -.9em;

margin-right: -.9em;

margin-bottom: -2em;

text-align: center;

text-transform: capitalize;

}

#workskin .imessagebody {

background-color: #FFFFFF;

display: table;

padding-left: .5em;

padding-right: .5em;

}

#workskin .itext {

float: left;

color: #000000;

margin: 0 0 0.5em;

border-radius: 1em;

padding: 0.5em 1em;

background: #e5e5ea;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .buncheditext {

float: left;

color: #000000;

margin: 0 0 0.1em;

border-radius: 1em;

padding: 0.5em 1em;

background: #e5e5ea;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .itext::after {

content: "";

position: absolute;

left: -.5em;

bottom: 0;

width: 0.5em;

height: 1em;

border-right: 0.5em solid #e5e5ea;

border-bottom-right-radius: 1em 0.5em;

}

#workskin .breply {

float: right;

color: #FFFFFF;

margin: 0 0 0.5em;

border-radius: 1em;

padding: 0.5em 1em;

background: #1289fe;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .bunchedbreply {

float: right;

color: #FFFFFF;

margin: 0 0 0.1em;

border-radius: 1em;

padding: 0.5em 1em;

background: #1289fe;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .breply::after {

content: "";

position: absolute;

right: -0.5em;

bottom: 0;

width: 0.5em;

height: 1em;

border-left: 0.5em solid #1289fe;

border-bottom-left-radius: 1em 0.5em;

}

#workskin .greply {

float: right;

color: #FFFFFF;

margin: 0 0 0.5em;

border-radius: 1em;

padding: 0.5em 1em;

background: #35cb24;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .bunchedgreply {

float: right;

color: #FFFFFF;

margin: 0 0 0.1em;

border-radius: 1em;

padding: 0.5em 1em;

background: #35cb24;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .greply::after {

content: "";

position: absolute;

right: -0.5em;

bottom: 0;

width: 0.5em;

height: 1em;

border-left: 0.5em solid #35cb24;

border-bottom-left-radius: 1em 0.5em;

}

#workskin .itime {

min-width: 295px;

color: #7B7C80;

font-size: .75em;

padding-bottom: .5em;

padding-top: .5em;

margin-left: -.5em;

margin-right: -.5em;

margin-bottom: -.5em;

text-align: center;

display: table;

}

#workskin .inames {

color: #7B7C80;

font-size: .75em;

padding-bottom: .5em;

padding-top: 0;

margin-left: .5em;

margin-bottom: -2.5em;

text-align: left;

display: table;

clear: both;

}

#workskin .phoneAND {

width: 320px;

font-family: "Roboto","Noto",Arial,sans-serif;

margin: 20px auto;

}

#workskin .iconWrapperAND {

display: block;

width: 60px;

position: relative;

text-align: center;

}

#workskin .iconAND {

width: 50px;

height: auto;

border-radius: 50%;

margin-top: .1em;

position: relative;

}

#workskin .timestampAND {

font-size: smaller;

opacity: .5;

}

#workskin .headerAND {

background-color: #1993e6;

color: #fff;

width: 320px;

font-size: large;

padding: .5em 0 .5em .5em;

position: relative;

overflow: hidden;

box-sizing: border-box;

text-align: left;

text-transform: capitalize;

line-height: 30px;

display: table;

box-shadow: 0 7px 10px -3px #aaa;

}

#workskin .messagebodyAND {

list-style: none;

background-color: #efedeb;

margin: -2em 0 0 0;

padding: .5em 0 .5em 0;

}

#workskin .messagebodyAND li {

padding: .5em;

overflow: hidden;

display: flex;

}

#workskin .replyWrapperAND {

margin: 0;

padding: 0;

}

#workskin .replyAND {

width: 200px;

background: #fefefe;

color: #000;

padding: .7em;

border-radius: .2em;

position: relative;

}

#workskin .replyAND p {

margin: 0 0 .2em 0;

}

#workskin .replyIconWrapperAND {

display: block;

width: 75px;

position: relative;

text-align: right;

}

#workskin .replyIconWrapperAND::after {

content: "";

display: block;

position: absolute;

top: 0;

left: -.5em;

width: .5em;

height: 0;

border-top: 1em solid #fefefe;

border-right: 1em solid transparent;

}

#workskin .textWrapperAND {

margin: 0;

padding: 0;

}

#workskin .textAND {

width: 200px;

background: #1993e6;

color: #fff;

padding: .7em;

border-radius: .2em;

}

#workskin .textAND p {

margin: 0 0 .2em 0;

}

#workskin .textIconWrapperAND {

display: block;

width: 75px;

position: relative;

text-align: left;

}

#workskin .textIconWrapperAND::after {

content: "";

position: absolute;

top: 0;

right: -.5em;

width: .5em;

height: 0;

border-top: 1em solid #1993e6;

border-left: 1em solid transparent;

}

#workskin .iphoneCHAT {

min-width: 300px;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

display: table;

margin: auto;

}

#workskin .headerCHAT {

display: table;

min-width: 300px;

background-color: #f6f6f6;

border-bottom: 1px solid #b2b2b2;

color: #000000;

font-weight: lighter;

font-size: .25em;

padding-bottom: .5em;

padding-top: .5em;

margin-left: -.9em;

margin-right: -.9em;

margin-bottom: -2em;

text-align: center;

text-transform: capitalize;

}

#workskin .messagebodyCHAT {

background-color: #FFFFFF;

display: table;

max-width: 300px; 

padding-left: .5em;

padding-right: .5em;

}

#workskin .messagebodyCHAT li {

overflow: hidden;

display: flex;

}

#workskin .iconWrapperCHAT {

display: block;

width: 60px;

position: relative;

text-align: center;

}

#workskin .iconCHAT {

width: 50px;

height: auto;

border-radius: 50%;

margin-top: .1em;

position: relative;

}

#workskin .itimeCHAT {

min-width: 295px;

color: #7B7C80;

font-size: .75em;

padding-bottom: .5em;

padding-top: .5em;

margin-left: -.5em;

margin-right: -.5em;

margin-bottom: -.5em;

text-align: center;

display: table;

}

#workskin .inamesCHAT {

color: #7B7C80;

font-size: .5em;

padding-bottom: .5em;

padding-top: 0;

margin-left: 4.2em;

margin-bottom: -2.5em;

text-align: left;

display: table;

clear: both;

}

#workskin .textWrapperCHAT {

margin: 0;

border: 0px;

padding:0; 

margin:0; 

border-collapse: collapse;

}

#workskin .textCHAT {

left: 0.7em;

color: #000000;

margin: 0 0 0.5em;

border-radius: 1em;

padding: 0.5em 1em;

background: #e5e5ea;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .textCHAT p {

margin: 0 0 .2em 0;

}

#workskin .bunchtextCHAT {

float: left;

left: 2em;

color: #000000;

margin: 0 0 0;

border-radius: 1em;

padding: 0.5em 1em;

background: #e5e5ea;

max-width: 75%;

clear: both;

position: relative;

}

#workskin .bunchtextCHAT p {

margin: 0 0 -.2em 0;

}

#workskin .textIconWrapperCHAT {

display: block;

width: 20px;

height: 20px;

position: relative;

top: 1em;

left: 0.5em;

}

#workskin .textCHAT::after {

content: "";

position: absolute;

left: -.5em;

bottom: 0;

width: 0.5em;

height: 1em;

border-right: 0.5em solid #e5e5ea;

border-bottom-right-radius: 1em 0.5em;

}

#workskin .bbphone {

max-width: 300px;

font-family: "OCR A Std", monospace;

display: table;

margin: auto;

}

#workskin .bbheader {

background-color: #38acec;

color: #fff;

width: 320px;

padding: .5em 0 .5em .5em;

position: relative;

overflow: hidden;

box-sizing: border-box;

text-align: left;

text-transform: capitalize;

line-height: 10px;

display: table;

box-shadow: 0 7px 10px -3px #aaa;

}

#workskin .bbmessagebody {

list-style: none;

background-color: #efedeb;

margin: -2em 0 0 0;

padding: .5em 0 .5em 0;

}

#workskin .bbmessagebody li {

padding: .5em;

overflow: hidden;

display: flex;

}

#workskin .bbtext {

left: 1em;

color: #003366;

margin: 0 0;

padding: 0.5em 1em;

background: #FFFFFF;

border: #A0A0A0;

border-style: solid;

width: 80%;

clear: both;

position: relative;

}

#workskin .bbreply {

left: 1em;

color: #660000;

margin: 0 0;

padding: 0.5em 1em;

background: #FFFFFF;

border: #A0A0A0;

border-style: solid;

width: 80%;

clear: both;

position: relative;

}


End file.
